<script lang="ts" setup>
import { getSafeInfo } from '@/utils/system'
import {useGetOrderStatusActions} from '@/pages/order/dataHandler'
import PopCompleteUpload from '@/pages/order/components/PopCompleteUpload.vue'
import {useChatWithFriend} from '@/hooks/useChatWithFriend'

const { goChatById } = useChatWithFriend()
const emit = defineEmits(['refresh'])
const safeInfo = getSafeInfo()
const realSafeBottom = computed(() => {
  return `${safeInfo.bottom}px`
})
const show = ref(false)
const item = ref(null)
const complete_upload = ref()
const stepValue = computed(() => {
  const steps = ['ASSIGNED', 'START', 'ARRIVED', 'REPAIRING', 'COMPLETED']
  const status = item.value?.status || ''
  const index = steps.indexOf(status)
  return index
})
const open = (row) => {
  item.value = row
  show.value = true
}
const close = () => {
  show.value = false
  item.value = null
}
// const handleComplete = inject<() => void>('completeTrigger')
// const handleStartRepair = inject<(data:any) => void>('startRepairTrigger')
// const handleSignIn = inject<(data:any) => void>('signInTrigger')
// const handleSetOff = inject<(data:any) => void>('setOffTrigger')

const statusActions = useGetOrderStatusActions({successFn:()=>{
  emit('refresh')
  close()
}})
const handleBtnClick = async () => {
  const { status } = item.value || {}
  if (status === 'ASSIGNED') {
    statusActions.handleSetOff(item.value)
  }
  else if (status === 'START') {
    statusActions.handleSignIn(item.value)
  }
  else if (status === 'ARRIVED') {
    statusActions.handleStartRepair(item.value)
  }
  else if (status === 'REPAIRING') {
    complete_upload.value.open(item.value)
  }
}
const handleNavigation = async () => {
  console.log(item.value)
  const {latitude, longitude, stationLocation} = item.value || {}
  uni.openLocation({
    type: 'gcj02',
    latitude,
    longitude,
    name: stationLocation,
    address: stationLocation,
    scale: 12,
    success(res) {
      console.log('打开系统位置地图成功1', res)
    },
    fail(error) {
      console.log(error)
    },
  })
}
const handleCall = () => {
  const phoneNumber = item.value?.contactNumber
  uni.makePhoneCall({
    phoneNumber,
    // success(res) {},
    // fail(err) {},
  })
}
const handleChat = () => {
  console.log(item.value)
  goChatById(item.value.customerId)
}
defineExpose({
  open,close
})
</script>

<template>
  <wd-popup v-model="show" custom-style="height: 85vh" position="bottom" @close="close">
    <view
      v-if="item"
      class="popBody"
      :style="{ paddingBottom: realSafeBottom }"
      @click.stop=""
    >
      <view class="h-12 flex items-center justify-between px-3">
        <text class="line-clamp-1">
          工单详情-{{ item.requestTitle }}
        </text>
        <wd-icon name="close" size="14px" @click="close" />
      </view>
      <view class="pop_content">
        <scroll-view :scroll-y="true" style="height: 100%" scrollbar="true">
          <view class="p-10px pb-10">
            <view class="mb-4 flex items-center justify-between">
              <text> #{{ item.number }} </text>
              <sar-tag
                :color="item.status_label_bg"
                :text-color="item.status_label_color"
              >
                {{ item.status_label }}
              </sar-tag>
            </view>
            <view class="relative h-12">
              <view class="absolute top-0 w-[calc(100%+40px)] -left-5">
                <wd-steps :active="stepValue" align-center>
                  <wd-step title="待处理" />
                  <wd-step title="出发途中" />
                  <wd-step title="已到达" />
                  <wd-step title="处理中" />
                  <wd-step title="已完成" />
                </wd-steps>
              </view>
            </view>
            <view class="mt-5">
              <view class="descItem w-1/2">
                <text class="text-sub">
                  维修类型
                </text>
                <text>{{ item.repairCategory }}</text>
              </view>
              <view class="descItem w-1/2">
                <text class="text-sub">
                  预约时间
                </text>
                <text>{{ item.assignedTime }}</text>
              </view>
              <view class="descItem mt-2 w-full">
                <text class="text-sub">
                  故障描述
                </text>
                <text class="mt-2 rounded-sm bg-gray-100 p-2">
                  {{ item.desc }}
                </text>
              </view>
              <view v-if="!item.noImg" class="descItem mt-5 w-full">
                <text class="text-sub">
                  客户上传图片
                </text>

                <view class="imgContainer mt-2">
                  <view v-for="img in item.imgArr" :key="img" class="imgWrap inline-flex">
                    <JediImg
                      :src="img"
                      width="100%"
                      height="100%"
                      :enable-preview="true"
                      mode="aspectFit"
                      class="w-full h-full border border-solid border-gray-100 rounded"
                    />
                  </view>
                </view>
              </view>
              <view class="descItem mt-5 w-full">
                <text class="text-sub">
                  服务地址
                </text>
                <text class="mb-2 mt-1">
                  {{ item.stationLocation }}
                </text>
                <wd-button
                  v-if="item"
                  plain
                  block
                  :round="false"
                  :type="item.status_btn_type"
                  @click="handleNavigation()"
                >
                  <i class="iconfont icon-locate inline text-sm" />
                  查看地图并导航
                </wd-button>
              </view>
              <view class="descItem mt-5 w-full">
                <text class="text-sub">
                  客户信息
                </text>
                <view class="mt-2 rounded-sm bg-gray-100 p-2">
                  <text class="mb-2">
                    {{ item.contactName }} {{ item.contactNumber }}
                  </text>
                  <view class="mt-2 flex gap-2">
                    <view class="flex-1">
                      <wd-button
                        plain
                        block
                        :round="false"
                        :type="item.status_btn_type"
                        @click="handleCall()"
                      >
                        <i class="iconfont icon-phone inline text-sm" />
                        电话联系
                      </wd-button>
                    </view>
                    <view class="flex-1">
                      <wd-button
                        plain
                        block
                        :round="false"
                        :type="item.status_btn_type"
                        @click="handleChat()"
                      >
                        <i class="iconfont icon-chat inline text-sm" />
                        发送消息
                      </wd-button>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-if="item.status_btn_visible" class="pop_footer topLine">
        <wd-button
          v-if="item"
          block
          :round="false"
          size="large"
          :type="item.status_btn_type"
          @click="handleBtnClick()"
        >
          <i :class="`inline iconfont ${item.status_icon} text-sm`" />
          {{ item.status_btn_text }}
        </wd-button>
      </view>
    </view>
  </wd-popup>
  <PopCompleteUpload
      ref="complete_upload"
      @refresh="emit('refresh')"
    />
</template>

<style lang="scss" scoped>
.popBody {
  background-color: #fff;
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // right: 0;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .pop_content {
    flex: 1;
    height: 100px;
    overflow-x: hidden;
    @apply text-sm;
    .descItem {
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
    }
    .imgContainer {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      .imgWrap {
        width: calc((100% - 8px) / 3);
        aspect-ratio: 1 / 1;
      }
    }
  }
  .pop_footer {
    padding: 8px 12px;
  }
}
</style>
